import { FullscreenOutlined } from "@ant-design/icons";
import { Button, Tooltip } from "antd";
import React from "react";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";

type Props = {
  code: string;
  language?: string;
};
const CodeDisplayPage = ({ code, language }: Props) => {
  const [isShowCode, setIsShowCode] = React.useState(false);
  return (
    <div>
      <Tooltip title={"查看页面代码"}>
        <Button
          size="small"
          type="primary"
          onClick={() => {
            setIsShowCode(!isShowCode);
          }}
        >
          <FullscreenOutlined />
        </Button>
      </Tooltip>

      <div className="code-block">
        {isShowCode && (
          <SyntaxHighlighter
            language={language || "tsx"}
            style={vscDarkPlus}
            showLineNumbers
            wrapLines
            lineProps={{
              style: { wordBreak: "break-all", whiteSpace: "pre-wrap" },
            }}
          >
            {code}
          </SyntaxHighlighter>
        )}
      </div>
    </div>
  );
};

export default CodeDisplayPage;
